<template>
  <div class="m-login">
    <div class="m-login-container">
      <div class="m-login-left">
        <h2>
          <p class="f-img"><img :src="logo" alt="" /></p>
          <p class="f-title">OMS3.0 - 管理平台</p>
        </h2>
        <h1>连锁餐饮供应链强管控专家</h1>
        <p>Landing expert of Restaurant chain brand Supply chain Strong control</p>
      </div>
      <div class="m-login-right">
        <div class="m-login-box" :style="{ height: loginHeight + 'px' }">
          <p class="f-title">管理登录</p>
          <div v-show="loginType == 'login'">
            <el-form class="f-form" :model="loginForm" :rules="loginRules" ref="loginForms" label-width="0">
              <el-form-item label="" v-if="!isVercode" prop="loginName">
                <el-input type="text" v-model="loginForm.loginName" placeholder="请输入用户名或手机号"></el-input>
              </el-form-item>
              <el-form-item label="" v-else prop="loginPhone">
                <el-input type="text" v-model="loginForm.loginPhone" onkeyup="value=value.replace(/[^\d]/g,'')"
                  maxlength=" 11" placeholder="请输入手机号码"></el-input>
              </el-form-item>
              <el-form-item v-if="!isVercode" label="" prop="loginPassword">
                <el-input type="password" v-model="loginForm.loginPassword" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item v-else label="" prop="verifyCode">
                <div class="f-form-vercode">
                  <el-input class="f-input" v-model="loginForm.verifyCode" onkeyup="value=value.replace(/[^\d]/g,'')"
                    maxlength="6" placeholder="请输入验证码"></el-input>
                  <p v-if="loginVercodeType !== 2" class="f-btn" type="primary" @click="loginVercodeEvent">
                    {{ loginVercodeName }}</p>
                  <p v-else class="f-countdown">{{ loginCountdown }}s</p>
                </div>
              </el-form-item>
            </el-form>
            <div class="f-switch">
              <p class="f-switch-left">
                <!-- <el-checkbox v-model="isAutoLogin">自动登录</el-checkbox> -->
              </p>
              <p class="f-switch-right" @click="switchVerify">{{ !isVercode ? '使用手机验证码登录' : '使用密码登录' }}</p>
            </div>
            <div class="f-button">
              <el-button style="width: 136px; height: 32px; background-color: #31c0ff; border: none;"
                @click="loginEvent" type="primary" size="small">登 录</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, reactive, ref, toRefs } from "vue";
import { useStore } from "vuex";
import { register, smsRegister, smsLogin } from "@/api/logins";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";

export default {
  setup() {
    const loginForms = ref(null);
    const registerForms = ref(null);
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== state.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else {
        let reg = /^1[34578]\d{9}$/;
        if (!reg.test(value)) {
          callback(new Error("手机号码输入有误"));
        } else {
          callback();
        }
      }
    };
    const validatePass2 = (rule, value, callback) => {
      let regs = /^[0-9]*$/;
      if (value === "") {
        callback(new Error("请输入用户名或手机号"));
      } else if (
        value.replace(/[\u0391-\uFFE5]/g, "aa").length > 18 ||
        value.replace(/[\u0391-\uFFE5]/g, "aa").length < 4
      ) {
        callback(new Error("请输入4-18位字符"));
      } else {
        callback();
      }
    };
    const validatePass3 = (rule, value, callback) => {
      let regs1 = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![_~@#$^]+$)[a-zA-Z\d_~@#$^]+$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length > 18 || value.length < 6) {
        callback(new Error("请输入6-18位密码"));
      } else if (!regs1.test(value)) {
        callback(new Error("请输入大小写字母、数字、符号至少含有2种或以上"));
      } else {
        callback();
      }
    };
    const state = reactive({
      logo: require("@/assets/imgs/logo.png"),
      loginForm: {
        loginPhone: "",
        loginName: "",
        loginPassword: "",
        verifyCode: "",
      },
      registerForm: {
        phone: "",
        password: "",
        repassword: "",
        verifyCode: "",
      },
      isVercode: false,
      loginType: "login",
      loginHeight: 450,
      isAutoLogin: false,
      isAgreement: false,
      isPopups: false,
      loginVercodeType: 1,
      loginCountdown: 60,
      registerVercodeType: 1,
      registerCountdown: 60,
      loginRules: {
        loginPhone: [
          { required: true, validator: validatePass1, trigger: "blur" },
        ],
        loginName: [
          {
            required: true,
            validator: validatePass2,
            trigger: "blur",
          },
        ],
        loginPassword: [
          { required: true, validator: validatePass3, trigger: "blur" },
        ],
        verifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
      registerRules: {
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        repassword: [{ validator: validatePass, trigger: "blur" }],
        verifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
    });
    const switchVerify = () => {
      state.loginForm.verifyCode = "";
      state.loginForm.loginPassword = "";
      state.isVercode = !state.isVercode;
    };
    const switchLoginType = (val) => {
      state.loginType = val;
      if (val == "login") {
        state.loginHeight = 450;
      } else {
        state.loginHeight = 560;
      }
    };
    const loginVercodeEvent = () => {
      const phone = state.loginForm.loginPhone;
      if (phone && /^1[3456789]\d{9}$/.test(phone)) {
        if (state.loginVercodeType == 1) {
          smsLogin({ phone: phone })
            .then((response) => {
              console.log(response);
              state.loginVercodeType = 2;
              var timer = setInterval(() => {
                if (state.loginCountdown == 0) {
                  state.loginVercodeType = 1;
                  clearInterval(timer);
                  state.loginCountdown = 60;
                } else {
                  state.loginCountdown--;
                }
              }, 1000);
            })
            .catch((res) => {
              state.loginVercodeType = 1;
            });
        }
      } else {
        ElMessage.error("请填写正确手机号码");
      }
    };
    const loginEvent = () => {
      loginForms.value.validate((valid) => {
        if (valid) {
          let loginType = !state.isVercode ? "1" : "2";
          let loginName =
            loginType == 1
              ? state.loginForm.loginName
              : state.loginForm.loginPhone;
          let loginPassword =
            loginType == 1
              ? state.loginForm.loginPassword
              : state.loginForm.verifyCode;
          let loginForm = {};
          loginForm.loginType = loginType;
          loginForm.loginName = loginName;
          loginForm.loginPassword = loginPassword;
          store
            .dispatch("user/login", loginForm)
            .then(() => {
              router.push({ path: "/dashboard" });
            })
            .catch(() => {});
        } else {
          return false;
        }
      });
    };
    const registerEvent = async () => {
      registerForms.value.validate((valid) => {
        if (valid) {
          if (state.isAgreement) {
            let [phone, password, verifyCode] = [
              state.registerForm.phone,
              state.registerForm.password,
              state.registerForm.verifyCode,
            ];
            register({
              phone: phone,
              password: password,
              verifyCode: verifyCode,
            }).then((response) => {
              console.log(response);
            });
          } else {
            ElMessage.error("请先阅读并同意用户注册协议");
          }
        } else {
          return false;
        }
      });
    };
    const registerVercodeEvent = () => {
      const phone = state.registerForm.phone;
      if (phone && /^1[3456789]\d{9}$/.test(phone)) {
        if (state.registerVercodeType == 1 || state.registerVercodeType == 2) {
          state.registerVercodeType = 3;
          window.setInterval(() => {
            if (state.registerCountdown == 0) {
              state.registerCountdown = 60;
              state.registerVercodeType = 2;
              return;
            }
            state.registerCountdown--;
          }, 1000);
          smsRegister({ phone: phone }).then((response) => {
            console.log(response);
          });
        }
      } else {
        ElMessage.error("请填写正确手机号码");
      }
    };
    const loginVercodeName = computed(() => {
      window.clearInterval();
      state.loginCountdown = 60;
      if (state.loginVercodeType == 1) {
        return "获取验证码";
      }
    });
    const closePopups = () => {
      state.isPopups = false;
    };
    const confirmPopups = () => {
      state.isAgreement = true;
      state.isPopups = false;
    };
    return {
      ...toRefs(state),
      loginForms,
      registerForms,
      switchVerify,
      switchLoginType,
      loginEvent,
      registerEvent,
      closePopups,
      confirmPopups,
      loginVercodeEvent,
      loginVercodeName,
      registerVercodeEvent,
    };
  },
};
</script>

<style lang="less" scoped>
.m-login {
  width: 100%;
  height: 100vh;
  background: url("../../assets/imgs/bg.png") no-repeat center top;
  background-size: 100% 100%;
  .m-login-container {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
  }
  .m-login-left {
    height: 400px;
    color: #fff;
    h2 {
      display: flex;
      align-items: center;
      height: 140px;
      padding: 0;
      margin: 0;
      .f-title {
        padding-left: 15px;
        font-size: 46px;
        font-family: @font-familys;
        font-weight: bold;
      }
    }
    h1 {
      padding: 0;
      margin: 0;
      height: 76px;
      font-size: 64px;
      font-family: @font-familys;
      font-weight: bold;
    }
    p {
      font-size: 22px;
      font-family: @font-familys;
    }
  }
  .m-login-right {
    margin-left: 160px;
    .m-login-box {
      width: 380px;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 8px;
      overflow: hidden;
      .f-title {
        width: 104px;
        text-align: center;
        margin: 52px auto;
        font-size: 24px;
        color: #6a6b69;
        &:after {
          content: " ";
          display: block;
          width: 100%;
          height: 6px;
          margin-top: 14px;
          background-color: #31c0ff;
          border-radius: 3px;
        }
      }
      .f-form {
        width: 80%;
        margin: 0 auto;
        .f-form-vercode {
          display: flex;
          .f-input {
            flex: 1;
          }
          .f-btn {
            width: 125px;
            margin-left: 20px;
            text-align: center;
            color: #fff;
            background-color: #31c0ff;
            cursor: pointer;
            border-radius: 3px;
          }
          .f-countdown {
            width: 125px;
            margin-left: 20px;
            border-radius: 3px;
            background-color: #cccccc;
            color: #fff;
            text-align: center;
          }
        }
      }
      .f-agree {
        width: 80%;
        margin: 0 auto 30px;
        /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #606266;
        }
        span {
          font-size: 14px;
        }
        em {
          cursor: pointer;
          color: #3299eb;
        }
      }
      .f-switch {
        display: flex;
        justify-content: space-between;
        width: 80%;
        height: 30px;
        line-height: 30px;
        margin: 0 auto 30px;
        font-size: 14px;
        /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
          background-color: #31c0ff;
          border-color: #31c0ff;
        }
        /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #606266;
        }
        .f-switch-right {
          cursor: pointer;
          color: #31c0ff;
        }
      }
      .f-button {
        text-align: center;
      }
    }
    .m-switch {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 160px;
      height: 40px;
      margin: 60px auto 0;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 30px;
      .m-switch-left,
      .m-switch-right {
        cursor: pointer;
      }
      .m-switch-center {
        width: 10px;
        height: 10px;
        margin: 0 10px;
        background-color: #585858;
        border-radius: 20px;
      }
      .f-active {
        color: #fd6f2d;
      }
    }
  }
}
.m-popups {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  .m-popups-bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .m-popups-box {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;
    width: 60%;
    height: 100%;
    background-color: #fff;
    border-radius: 26px 0 0 26px;
    .f-title {
      display: flex;
      width: 90%;
      height: 60px;
      margin: 0 auto 30px;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #cccccc;
      p {
        font-size: 16px;
      }
      i {
        cursor: pointer;
        font-size: 16px;
      }
    }
    .f-content {
      width: 90%;
      height: 80%;
      margin: 0 auto 12px;
      padding: 12px;
      font-size: 14px;
      overflow: auto;
      overflow-x: hidden;
      border-top: 1px solid #e2e2e2;
      border-left: 1px solid #e2e2e2;
      border-bottom: 1px solid #e2e2e2;
      box-sizing: border-box;
    }
    .f-btn {
      width: 90%;
      margin: 0 auto;
      text-align: right;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
